<template>
    <div class="page-common">
      <div class="row" v-for="(item,index) in datalist" :key="item.id">
        <mt-switch v-model="value[index]"></mt-switch>
        <img :src="item.imageUrl" alt="item.title" class="img" >
        <div class="inforight">
          <h4>{{item.title}}</h4>
          <div class="bottom">
            <ul>
              <li>￥{{item.price}}</li>
              <li><carinputnumber :initCount="item.cou" :goodid="item.productId" v-on:cardataobj="getiInputNumber"></carinputnumber></li>
              <li><a href="javascript:void(0)" @click="delrow(item.productId,index)">删除</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="total">
          <div class="desc">
            <ul>
              <li>总计（不含运费）</li>
              <li class="total-num">已勾选商品<span>{{ totalcount}}</span>件,总价:<span>￥{{totalAmount}}</span>元</li>
            </ul>
          </div>
          <div id="button">
            <mt-button  type="danger" size="normal">去结算</mt-button>
          </div>
      </div>
    </div>
</template>
<script>
//  <!--逻辑不一样，所以需要重新定义一个组建-->
  import carinputnumber from '../components/carinputnumber'
  import {getgoodObject,updateData,remoteItem} from '../kits/localStr.js'
    export default {
        data() {
            return {
                datalist:[],
                totalAmount:0, //总价格
                value:[], //switch 的value值
            }
        },
//      计算属性
      computed:{
//            1.0定义计算总件数的属性
        totalcount(){
//          计算逻辑：只需要计算出this.value数组中的ture值有多少个即可
          let trueArr = this.value.filter(item => {
            return item
          });
//          计算出当前选中的商品总价格
//          当前购买数量*单价
          let account = 0; //计算的总数
          this.value.forEach((item, index) => {
            if (item) {
//                找到下标，刚好也是数据中的第几个数
              let count = parseInt(this.datalist[index].cou);
              let price = parseInt(this.datalist[index].price);
              account += count * price;
            }
          });
          this.totalAmount = account;
          return trueArr.length
//          随着数组的变化，动态计算属性，依赖某个对象，对象变化就会触发
        }
      },
        components: {
          carinputnumber
        },
        methods:{
          getlistinfo(){
            var obj = getgoodObject();
            let that = this;
            that.axios.get("../static/getCardata.json",{}).then(function(res){
//                将locaStorage中的所有的商品对应的count的值赋值给message中每个对象的cou
                res.data.message.forEach((item)=> {
                  item.cou = obj[item.id];
//                res.data.message.forEach(item => item.cou = obj[item.id],that.value.push(false));
                  //	为了解决一个bug所以必须在此处初始化values数组全部为false
                  that.value.push(false);
                });
              that.datalist = res.data.message;
              });
          },
//          删除一行数据
          delrow(id,index){
//            1.0datalist数组中的数据移除
            this.value.splice(index,1);
            this.datalist.splice(index,1);
            remoteItem(id);
//            2.0,this.valus中的值要移除
//            3.0, 将localStroage中的goodsid对应的所有值移除
          },
//          从locaal里面取数量和id
          getiInputNumber(resObj){
//              获取数量组件中的内容
//            1.0 更新localStorage中的数据
            updateData(resObj);
//2.0 更新 this.datalist中的当前数量
            let that = this;
            for (var i = 0; i < this.datalist.length; i++) {
              if (that.datalist[i].productId == resObj.goodid) {
                if (resObj.type == 'add') {
                  that.datalist[i].cou = that.datalist[i].cou + 1;
                } else {
                  that.datalist[i].cou = that.datalist[i].cou - 1;
                }
                break;
              }
            }
          }
        },
      created(){
        this.getlistinfo();
      }
    }
</script>
<style scoped>
  .row{
    border-bottom: 1px solid rgba(0,0,0,0.3);
    height: 102px;
    display: flex;
    padding: 5px;
  }

  .switch{
    flex:0 0 52px;
  }

  .img{
    margin-left: 5px;
    height: 75px;
    width: 75px;
    flex: 0 0 85px;
  }

  .inforight{
    flex:1;
  }
  .inforight ul{
    padding-left: 0px;
  }
  .inforight li{
    list-style: none;
    display: inline-block;
  }

  .inforight h4{
    color: #0094ff;
    font-size: 14px;
  }

  .bottom li:first-child{
    color:red;
    margin-right: 5px;
  }
  .total{
    height: 100px;
    background-color: rgba(0,0,0,0.1);
    display: flex;
    padding: 5px;;
  }

  .total ul {
    padding-left: 0px;
  }
  .total li{
    list-style: none;
    font-size: 14px;
  }

  #button{
    flex:0 0 60px;
    margin: 30px 10px 0 0 ;
  }

  .desc{
    flex:1;
  }
  .desc ul{
    margin-top: 20px;
  }
  .desc ul li{
    text-align: left;
    padding-left: 10px;
  }
  .desc ul .total-num span{
    font-size: 20px;
    color:#ff7555;
    padding: 0 5px;
  }
</style>
